<template>
  <a-modal
    :visible.sync="visible"
    v-bind="$attrs"
    v-on="$listeners"
    :maskClosable="false"
    :footer="null"
    width="1000px"
    title="审批记录"
    wrapClassName="user-modal-container"
    @cancel="closeModal()"
  >
    <div class="curve-modal-body" v-loading="loading">
      <VxeTableView>
        <template slot-scope="{ height }">
          <vxe-table
            align="center"
            :data="tableData"
            show-overflow
            show-header-overflow
            show-footer-overflow
            show-footer
            :column-config="{ resizable: true }"
            class="scrollbarStyle"
            :height="height"
            :sort-config="{ trigger: 'cell' }"
            ref="xTable"
            :scroll-x="{ gt: 10 }"
            :scroll-y="{ gt: 100 }"
            row-id="id"
          >
            <vxe-column type="seq" title="序号" width="80"></vxe-column>

            <vxe-column
              :title="item.title"
              :field="item.key"
              :key="index"
              min-width="120"
              show-overflow
              v-for="(item, index) in columns"
            >
              <template #default="{ row }">
                <!-- 操作 -->
                <div
                  v-if="item.key == 'operation'"
                  class="operation-td"
                  :class="[filterOperationClass(row[item.key])]"
                >
                  {{ row[item.key] | filterOperationValue }}
                </div>
                <div v-else>{{ row[item.key] }}</div>
              </template>
            </vxe-column>
          </vxe-table>
        </template>
      </VxeTableView>
    </div>
  </a-modal>
</template>
<script>
import { approveRecord } from "@/api/wisdom-beam/planSchedule-app.js";
import VxeTableView from "@/components/VxeTableView";
export default {
  name: "aproveRecord",
  components: { VxeTableView },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: String,
      default: "",
    },
  },
  watch: {
    visible: {
      handler(val) {
        this.$emit("update:visible", val);
        if (val) {
          this.getData();
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      loading: false,
      columns: [
        {
          title: "审批节点",
          dataIndex: "wfnodename",
          key: "wfnodename",
          width: "150px",
        },
        {
          title: "审批人",
          dataIndex: "sysUsername",
          key: "sysUsername",
          width: "100px",
        },
        {
          title: "审批时间",
          dataIndex: "updateTimeStr",
          key: "updateTimeStr",
          width: "150px",
        },
        {
          title: "操作",
          dataIndex: "operation",
          key: "operation",
          width: "90px",
        },
        {
          title: "处理时长",
          dataIndex: "hours",
          key: "hours",
          width: "120px",
        },
        {
          title: "意见",
          dataIndex: "reason",
          key: "reason",
          width: "150px",
        },
      ],
      tableData: [],
    };
  },
  filters: {
    //0-提交，1-审批中，2-通过，3-拒绝，4-驳回
    filterOperationValue(val) {
      switch (val) {
        case "0":
          return "提交";

        case "1":
          return "审批中";

        case "2":
          return "通过";

        case "3":
          return "拒绝";

        case "4":
          return "驳回";
      }
    },
  },
  methods: {
    //审批记录
    getData() {
      return new Promise((resolve, reject) => {
        let { id } = this;
        this.loading = true;
        approveRecord({ id })
          .then((res) => {
            let { data } = res;
            this.tableData = data?.result ?? [];
            resolve();
          })
          .catch((_) => {
            this.tableData = [];
            reject();
          })
          .finally((_) => {
            this.loading = false;
          });
      });
    },

    filterOperationClass(val) {
      switch (val) {
        case "0":
          return "submit";

        case "1":
          return "approve";

        case "2":
          return "pass";

        case "3":
          return "refuse";

        case "4":
          return "reject";
      }
    },

    //关闭弹框
    closeModal() {
      this.$emit("update:visible", false);
      this.tableData = [];
    },
  },
};
</script>
<style lang="less" scoped>
/deep/.user-modal-container {
  .ant-modal-body {
    padding: 0;
  }
  .ant-modal-header {
    border-top: 5px solid var(--primary-color) !important;
  }
  .curve-modal-body {
    height: 450px;
    padding: 10px 20px 20px 10px;
    .custom-scrollbar();
    .operation-td {
      //提交
      &.submit {
        color: var(--primary-color);
      }
      //审批中
      &.approve {
        color: #0098ff;
      }

      //通过
      &.pass {
        color: #4bc964;
      }

      //拒绝
      &.refuse {
        color: #ff993f;
      }

      //驳回
      &.reject {
        color: #ff3f4a;
      }
    }
  }
  .modal-footer {
    padding-bottom: 20px;
    text-align: center;
    button {
      &:last-child {
        margin-left: 20px;
      }
    }
  }
  .color-text {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
  }
  .color-1 {
    color: var(--primary-color);
  }
  .color-2 {
    color: #4bc964;
  }
  .color-3 {
    color: #ff3f4a;
  }
}
</style>
